/**
 * Created with  SublimeText
 * @Author:      Lyle
 * @DateTime:    2017-05-25 11:03:18
 * @Description: 
 */


export default {
    install(Vue, options) {

        Vue.mixin({
            data: function() {
                return {
                    winScrollTop: 0,
                    divScrollTop: 0,
                    touchStartY: 0,
                    touchMoveY: 0,
                    documentTouchStartY: 0,
                    divDataLoading: false,
                    dropController: 150,
                    touchObj: {
                        y1: 0,
                        y2: 0,
                        direction: 'top',
                    }
                }
            },

            created() {
                this.scrollListen = _.throttle(this.scrollFunc, 500);
            },

            activated() {
                this.setEventListener('add');
            },

            deactivated() {
                this.setEventListener('remove');
            },

            computed: {
                divTopOffset: function() {
                    let moveNum = this.touchMoveY - this.touchStartY;
                    moveNum = moveNum > 0 ? moveNum : 0;
                    moveNum = moveNum * (this.dropController / 250);
                    this.dropController--;
                    if (this.divDataLoading) {
                        moveNum = 50;
                    }
                    return moveNum
                }
            },

            methods: {

                repalceStr(str, arr) {
                    var patten = new RegExp("\\$\\d{1}", "g"),
                        newStr = str.replace(patten, function(value) {
                            var index = parseInt(value.replace('$', ''));
                            return arr[index];
                        });
                    return newStr;
                },

                setEventListener(type) {
                    let el = this.$refs.divScrollListen,
                        tthis = this;
                    if (type == 'add' && el) {
                        el.scrollTop = tthis.divScrollTop;
                        el.addEventListener('scroll', tthis.scrollListen);
                        if (this.onDivUpScroll || this.onDivDownScroll) {
                            el.addEventListener('touchstart', this.touchStartIfDirection);
                            el.addEventListener('touchmove', this.touchMoveIfDirection);
                        }
                        if (tthis.onDivDropDown) {
                            el.addEventListener('touchstart', tthis.touchStartFunc);
                            el.addEventListener('touchmove', tthis.touchMoveFunc);
                            el.addEventListener('touchend', tthis.touchEndFunc);
                            document.addEventListener('touchstart', tthis.setDocumentTouchY);
                            document.addEventListener('touchmove', tthis.stopDefaultEvent);
                        }
                    } else if (type == 'remove' && el) {
                        tthis.divScrollTop = el.scrollTop;
                        el.removeEventListener('scroll', this.scrollListen);
                        if (this.onDivUpScroll || this.onDivDownScroll) {
                            el.removeEventListener('touchstart', this.touchStartIfDirection);
                            el.removeEventListener('touchmove', this.touchMoveIfDirection);
                        }
                        if (tthis.onDivDropDown) {
                            el.removeEventListener('touchstart', tthis.touchStartFunc);
                            el.removeEventListener('touchmove', tthis.touchMoveFunc);
                            el.removeEventListener('touchend', tthis.touchEndFunc);
                            document.removeEventListener('touchstart', tthis.setDocumentTouchY);
                            document.removeEventListener('touchmove', tthis.stopDefaultEvent);
                        }
                    }
                },

                touchStartIfDirection(e) {
                    this.touchObj.y1 = e.touches[0].clientY;
                },

                touchMoveIfDirection(e) {
                    this.touchObj.y2 = e.touches[0].clientY;
                    let y1 = this.touchObj.y1,
                        y2 = this.touchObj.y2;
                    this.touchObj.direction = y1 >= y2 ? 'up' : 'down';
                },

                setDocumentTouchY(e) {
                    this.documentTouchStartY = e.touches[0].pageY;
                },

                scrollFunc(e) {
                    let scrollTop,
                        clientHeight,
                        scrollHeight,
                        curDom = e.target;

                    scrollTop = curDom.scrollTop;
                    clientHeight = curDom.clientHeight;
                    scrollHeight = curDom.scrollHeight;

                    if (this.onDivScroll) {
                        this.onDivScroll(e);
                    }

                    if (this.touchObj.direction == 'up') {
                        if (this.onDivUpScroll) {
                            this.onDivUpScroll(e)
                        }
                    } else {
                        if (this.onDivDownScroll) {
                            this.onDivDownScroll(e)
                        }
                    }

                    if (scrollHeight - (scrollTop + clientHeight) < 80) {
                        if (this.onDivBottomScroll) {
                            this.onDivBottomScroll(e);
                        }
                    }

                },

                stopDefaultEvent(e) {
                    if (e.touches[0].pageY > this.documentTouchStartY && this.$refs.divScrollListen.scrollTop <= 0) {
                        e.preventDefault();
                    }
                },

                touchStartFunc(e) {
                    this.touchStartY = this.divDataLoading ? 0 : e.touches[0].pageY;
                },

                touchMoveFunc(e) {
                    if (!this.divDataLoading) {
                        if (Math.abs(this.divTopOffset) > 0) {
                            e.preventDefault();
                        }
                        this.touchMoveY = e.touches[0].pageY;
                        if (requestAnimationFrame) {
                            requestAnimationFrame(this.setDivPosition);
                        } else {
                            this.setDivPosition();
                        }
                        if (this.onDivDropDown) {
                            this.onDivDropDown('move', this.divTopOffset);
                        }
                    }
                },

                touchEndFunc(e) {
                    if (!this.divDataLoading) {
                        if (this.divTopOffset > 49 && !this.divDataLoading && this.$refs.divScrollListen.scrollTop <= 0) {
                            this.divDataLoading = true;
                        }
                        this.touchStartY = 0;
                        this.touchMoveY = 0;
                        this.dropController = 150;
                        if (requestAnimationFrame) {
                            requestAnimationFrame(this.setDivPosition);
                        } else {
                            this.setDivPosition();
                        }
                        if (this.onDivDropDown) {
                            this.onDivDropDown('end', this.divTopOffset);
                        }
                    }
                },

                clearDivTouchData() {
                    this.touchStartY = 0;
                    this.touchMoveY = 0;
                    //this.documentTouchStartY = 0;
                    this.divDataLoading = false;
                    this.dropController = 150;
                    this.setDivPosition();
                },

                setDivPosition() {
                    let tthis = this,
                        delayTime = (tthis.divTopOffset == 0 || tthis.divTopOffset == 50) ? 300 : 0;
                    if (tthis.$refs.divScrollListen.scrollTop == 0 || (!this.divDataLoading && tthis.divTopOffset == 0)) {
                        tthis.$refs.divDropListen.setAttribute('style', '-webkit-transform: translate3d(0px,' + tthis.divTopOffset + 'px, 0px);-webkit-transition: ' + delayTime + 'ms linear; -moz-transform: translate3d(0px,' + tthis.divTopOffset + 'px, 0px); -moz-transition: ' + delayTime + 'ms linear; transform: translate3d(0px,' + tthis.divTopOffset + 'px, 0px); transition: ' + delayTime + 'ms linear;')
                    }

                },
            }
        })
    }
}
